<template>
  <el-container>
    <el-header>
      <el-button class="btn float-left" type="primary" round>{{lang._285}}</el-button>
    </el-header>
    <!-- 顶部栏 -->
    <el-main>
      <el-table class="text-center tables" :span-method="objectSpanMethod" border :data="tableData" stripe header-cell-style="color:#409eff;background-color:#ECF5FF;text-align:center;font-size:15px;padding-left:0;padding-right:0">
        <el-table-column prop="uid" :label="lang._045" width="40">
        </el-table-column>
        <el-table-column prop="operate" :label="lang._028" width="100">
          <template slot-scope="scope">
            <el-button type="text">{{lang._078}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="createStore" :label="lang._286" width="300">
        </el-table-column>
        <el-table-column prop="participatingMember" :label="lang._287" width="80">    
        </el-table-column>
        <el-table-column prop="premiumMember" :label="lang._288" width="80">
        </el-table-column>
        <el-table-column prop="onlyOneTime" :label="lang._289" width="80">
        </el-table-column>
        <el-table-column prop="deadline" :label="lang._290" width="80">
        </el-table-column>
        <el-table-column prop="recharge" :label="lang._291" width="297">
        </el-table-column>
        <el-table-column prop="presented" :label="lang._292" width="317">
        </el-table-column>
        <el-table-column prop="byStages" :label="lang._293" width="297">
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<script>
  export default {
    props: ['lang'],
    data() {
      return {
        tableData: [{
            uid: '1',
            createStore: 'TastOfBlue',
            participatingMember: '全部等级',
            premiumMember: '不升级',
            onlyOneTime: '是',
            deadline: '永久',
            recharge: '通用余额+5',
            presented: '购物卡*1',
            byStages: '分12次赠送'
        },{
            uid: '1',
            createStore: 'TastOfBlue',
            participatingMember: '全部等级',
            premiumMember: '不升级',
            onlyOneTime: '是',
            deadline: '永久',
            recharge: '通用余额+5',
            presented: '购物卡*1',
            byStages: '分12次赠送'
        },{
            uid: '2',
            createStore: 'TastOfBlue',
            participatingMember: '全部等级',
            premiumMember: '不升级',
            onlyOneTime: '是',
            deadline: '永久',
            recharge: '通用余额+5',
            presented: '购物卡*1',
            byStages: '分12次赠送'
        },{
            uid: '1',
            createStore: 'TastOfBlue',
            participatingMember: '全部等级',
            premiumMember: '不升级',
            onlyOneTime: '是',
            deadline: '永久',
            recharge: '通用余额+5',
            presented: '购物卡*1',
            byStages: '分12次赠送'
        },{
            uid: '3',
            createStore: 'TastOfBlue',
            participatingMember: '全部等级',
            premiumMember: '不升级',
            onlyOneTime: '是',
            deadline: '永久',
            recharge: '通用余额+5',
            presented: '购物卡*1',
            byStages: '分12次赠送'
        },{
            uid: '1',
            createStore: 'TastOfBlue',
            participatingMember: '全部等级',
            premiumMember: '不升级',
            onlyOneTime: '是',
            deadline: '永久',
            recharge: '通用余额+5',
            presented: '购物卡*1',
            byStages: '分12次赠送'
        },]
      }
    },
    methods:{
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex <=7) {
          if (rowIndex % 2 === 0) { 
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
        }
    }
  }
</script>
<style lang="less" scoped>
  .el-container {
    .btn {
      margin-top: 15px;
      height: 30px;
      line-height: 30px;
      padding: 0 20px; //   margin-left: 20px;
      //   margin-right: 20px;
    }
    .el-header,
    .el-footer {
      background-color: #FFFFFF;
      color: #333;
      text-align: center;
      line-height: 60px;
    }

    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center; //   line-height: 160px;
    }

    body>.el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
  }

</style>
<style>
  .el-table th>.cell {
    padding-left: 0;
    padding-right: 0;
  }

</style>
